<template>
    <el-button
            class="ElButtonMini "
            :size="size"
            :type="type"
            :icon="iconClass"
            :title="title"
            :disabled="disabled"
            :loading="loading"
            :style="buttonStyle"
    >
        <slot></slot>
    </el-button>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class ElButtonMini extends Vue {
  @Prop({
    default: ''
  })
  readonly title!: any
  @Prop({
    default: ''
  })
  readonly type!: any
  @Prop({
    default: 'mini'
  })
  readonly size!: any
  @Prop({
    default: ''
  })
  readonly icon!: any
  @Prop({
    default: false
  })
  readonly disabled!: any
  @Prop({
    default: false
  })
  readonly loading!: any
  @Prop({
    default: ''
  })
  readonly iconColorClass!: any

  mounted() {
    this.reload()
  }

  activated() {}

  reload() {}

  get iconClass() {
    let colors = {
      'delete': ['iconfont icon-trash-alt', 'color-red'],
      'add': ['iconfont icon-plus', 'color-blue'],
      'edit': ['iconfont icon-edit', 'color-orange'],
      'search': ['iconfont icon-search', 'color-orange']
    }
    let ret = [this.icon, '']

    if (colors[this.icon]) {
      ret = colors[this.icon].concat([])
    }

    ret[1] = this.disabled ? 'color-gray' : this.iconColorClass || 'color-black'
    return ret.join(' ')
  }

  get buttonStyle() {
    let hasTitle = this.$slots.default || this.title

    if (hasTitle) {
      return {}
    }

    return {
      'padding-left': '7px',
      'padding-right': '7px'
    }
  }

}
</script>

<style lang="less" scoped>
    @import (reference) "~@/style/all.less";

    .ElButtonMini {
    }
</style>